import React from 'react';

const iconStyle: React.CSSProperties = {
	width: 10,
	display: 'inline',
};

export const ShiftIcon: React.FC = () => {
	return (
		<svg style={iconStyle} viewBox="0 0 448 512">
			<path
				fill="currentColor"
				d="M48.048 304h73.798v128c0 26.51 21.49 48 48 48h108.308c26.51 0 48-21.49 48-48V304h73.789c42.638 0 64.151-51.731 33.941-81.941l-175.943-176c-18.745-18.745-49.137-18.746-67.882 0l-175.952 176C-16.042 252.208 5.325 304 48.048 304zM224 80l176 176H278.154v176H169.846V256H48L224 80z"
			/>
		</svg>
	);
};

export const ArrowLeft: React.FC = () => {
	return (
		<svg style={iconStyle} viewBox="0 0 448 512">
			<path
				fill="currentColor"
				d="M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z"
			/>
		</svg>
	);
};

export const ArrowRight: React.FC = () => {
	return (
		<svg style={iconStyle} viewBox="0 0 448 512">
			<path
				fill="currentColor"
				d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
			/>
		</svg>
	);
};
